<template>
	<view class="pagesContent">
		<view class="top">
			<view class="pagesHeader">
				<!-- #ifdef APP -->
				<view class="navstatus"></view>
				<!-- #endif -->
				<view class="header">
					<view class="back" @click="back">
						<image class="icon" src="../../static/images/back_w.png" mode=""></image>
					</view>
					<view class="content"> 照片视频恢复 </view>
				</view>
				<view class="headerMessage">
					<view class="left">
						<view class="leftView ">
							<image class="icon animation  " v-if="exitType !='onStop'"
								src="../../static/images/scanICon.png" mode=""></image>
							<image class="icon  " v-else src="../../static/images/scanICon.png" mode=""></image>
						</view>
					</view>
					<view class="right">
						<view class="message_init">
							<view class="message1">找到图片、视频<text class="fontSize">{{ totalList.length }}</text>份 </view>
							<view class="message2">越早恢复效果越好 </view>
						</view>

						<view class="stop" v-if="exitType !='onStop'" @click="onStop">停止扫描</view>
						<view class="stopEnd" v-else> 扫描结束</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pageContentView">
			<view class="contentView">
				<view class="listView">
					<view class="haveFiles">
						<imageOrVideo v-if="showBox" :list="list" :scanType="scanType" @goPreviewItem="goPreviewItem">
						</imageOrVideo>
						<!-- 图片  -->
						<photoOrtxt v-else :list="list" :scanType="scanType" @goPreviewItem="goPreviewItem">
						</photoOrtxt>
						<!-- 视频 -->

					</view>
					<view class="no_data" v-if="false">
						<image class="icon" src="../../static/images/noDataIcon.png" mode=""></image>
						<view class="hint">暂未扫描文件... </view>
					</view>
				</view>


			</view>
		</view>
		<view class="foo">
			<!-- v-if="total>1" -->
			<view class="pages">
				<view class="prve">
					<view class="box" v-if="page>1" @click="prve">上一页</view>
					<view class="box boxDisable" v-if="page==1">上一页</view>
				</view>
				<view class="content"> {{ page}}/{{total}} </view>
				<view class="next">
					<view class="box " v-if="page < total" @click="next">下一页</view>
					<view class="box boxDisable" v-if="page == total">下一页</view>
				</view>
			</view>
		</view>

		<openVipsPopup ref="openVipsView" @goMember="goMember" @menber_tryout="menber_tryout"></openVipsPopup>

		<appHInt ref="appHIntView"></appHInt>
		<backPopup ref="backPopupView" @back_confirm="back_confirm"></backPopup>
		<scanPopup ref="scanPopupView" @confirm_perview="confirm_perview" @popupClose_scanEnd="popupClose_scanEnd">
		</scanPopup>





	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	// #ifdef APP		
	const globalEvent = uni.requireNativePlugin("globalEvent")
	// #endif
	import {
		unique
	} from "../../util/util.js"
	export default {
		data() {
			return {
				from: "",
				to: null,
				type: null,
				scanOption: null,
				scanType: null,
				filesType: null,
				totalList: [], //总数据
				list: [], //分页数据
				pagesList: [
					[]
				], //分页总数据
				page: 1, //当前页数
				pageSize: 50, //每页条数
				total: 0, //总页数

				animationStatus: false,
				exitType: "", //扫描状态
				progress: 10, //扫描进度
				addInterval: null, //扫描进度定时器   
				showBox: true, //显示图片还是文档  插件			


				goPreviewItemStatus: false,
			}
		},
		onShow() {
			let this_ = this;
			uni.setStorageSync("showExportBtn", true) //显示预览页面中，导出按钮
			if (!this.hasLogin) {
				this.goReLaunch("/pages/user/login")
			} else {
				this.scanOption = uni.getStorageSync("scanOption") //扫描位置
				this.scanType = uni.getStorageSync("scanType") //扫描文件类型
				if (this.scanType) {
					this.filesType = this.scanType;
					if (this.scanType == 'PICTURE' || this.scanType == 'ALL_PICTURE') {
						this.showBox = true
					}
					if (this.scanType == 'AUDIO' || this.scanType == 'FILE' || this.scanType == 'ALL_AUDIO' ||
						this.scanType == 'ALL_FILE' || this.scanType == 'VIDEO' || this.scanType == 'ALL_VIDEO') {
						this.showBox = false
					}

					this.filesType = this.scanType


					this.$nextTick(() => {
						// 正常进入
						let showHInt = uni.getStorageSync("showHInt")
						if (showHInt == "show") {
							this.$refs.appHIntView.popupOpen() //显示功能提示
						}
						let startInitType = uni.getStorageSync("startInitType")
						if (startInitType == 'on') {
							console.log("开始扫描")
							this.progress = 0
							this.animationStatus = true
							this.getEventState() //开始监听扫描状态
							this.init() // 开始监听扫描到的数据														
						}

						// 预览后返回
						// 是否有删除数据
						let delItem = uni.getStorageSync("delItem") //预览返回状态  有删除
						console.log("delItem", !!delItem, delItem)
						if (delItem) {
							delItem = JSON.parse(delItem)
							this.list.forEach((v, i) => {
								if (v.fileName == delItem.fileName) {
									this.list.splice(i, 1)
								}
							})
							this.$forceUpdate()

						}
						//预览返回状态
						let selectItem = uni.getStorageSync("selectItem")
						if (!selectItem) {
							uni.removeStorageSync("total")
							this.startScan()
						} else {
							this.progress = 100
							this.animationStatus = false
						}
					})
				}
			}
		},
		computed: {
			...mapGetters(["hasLogin", "userInfo", "appVipSwitch", ])
		},
		watch: {
			animationStatus(val, oval) {
				if (val) {
					let add = Math.ceil(1.2)
					this.addInterval = setInterval(() => {
						if (this.progress <= 90) {
							this.progress += add
						} else {
							clearInterval(this.addInterval)
						}
					}, 200)
				}
			},
		},


		onBackPress(e) {
			console.log("侧滑")
			// #ifdef APP
			uni.removeStorageSync("selectItem")
			uni.removeStorageSync("delItem")
			this.progress = 0
			clearInterval(this.addInterval)
			this.animationStatus = true

			this.exitType = "onBackPress"
			this.FileManagerModule.shutdown()
			console.log("侧滑返回停止扫描")
			// #endif
		},
		methods: {
			...mapMutations([]),
			...mapActions([]),
			// 扫描状态监听
			getEventState() {
				let this_ = this
				// #ifdef APP
				globalEvent.addEventListener("event_state", function(res) {
					console.log("扫描状态监听：", res)
					if (res.state == "finish") {
						this_.progress = 100
						this_.animationStatus = false
						uni.setStorageSync("total", this_.totalList.length)
						this_.FileManagerModule.shutdown()
						globalEvent.removeEventListener("event_state")
						setTimeout(() => {
							this_.$nextTick(() => {
								let data = {
									type: "scanEnd"
								}
								this_.$refs.scanPopupView.popupOpen(data)
							})
						}, 500)
					}
				})
				// #endif
			},
			// 开始监听扫描到的数据
			init() {
				let this_ = this
				this.$nextTick(() => {
					// #ifdef APP															
					console.log("监听运行")
					let arr = []
					globalEvent.addEventListener("event_file", function(res) {
						console.log("扫描到的文件：", res)
						let name_ = res.fileName.split(".");
						res.fileType = name_[name_.length - 1];
						res.isSelect = false;
						res.type = this_.scanType.type;
						res.options = this_.scanType.options;
						this_.totalList.push(res) //存入 所有数组

						if (this_.pagesList[0].length < this_.pageSize) {
							this_.list.push(res)
							this_.pagesList[0].push(res)
						}
						arr.push(res)
						if (arr.length == this_.pageSize) {
							arr = []
							this_.pagesList.push(arr)
						}
						this_.total = this_.pagesList.length
						console.log("this_.pagesList", this_.pagesList)
					})
					// #endif									
				})
			},

			// 按钮返回
			back() {
				if (this.animationStatus) {
					this.$refs.backPopupView.popupOpen()
				} else {
					this.back_confirm()
				}

			},

			// 确认返回
			back_confirm() {
				// #ifdef APP
				uni.removeStorageSync("selectItem")
				uni.removeStorageSync("delItem")
				this.progress = 0
				clearInterval(this.addInterval)
				this.animationStatus = false

				this.exitType = "onBackPress"
				this.FileManagerModule.shutdown()
				// #endif
				this.goSwitch("/pages/index/index")
			},
			goMember() {
				// #ifdef APP
				uni.removeStorageSync("selectItem")
				uni.removeStorageSync("delItem")
				this.progress = 0
				clearInterval(this.addInterval)
				this.animationStatus = false

				this.exitType = "onBackPress"
				this.FileManagerModule.shutdown()
				// #endif																
				this.goPage("/pages/user/member")
			},
			// 试用
			menber_tryout() {
				// #ifdef APP				
				this.progress = 0
				clearInterval(this.addInterval)
				this.animationStatus = false

				this.exitType = "onBackPress"
				this.FileManagerModule.shutdown()
				// #endif		
				this.goPage("/pages/preview/index")
			},

			// 停止退出			
			onStop() {
				console.log("停止")
				// #ifdef APP				
				uni.setStorageSync("startInitType", "off")
				this.progress = 100
				this.animationStatus = false
				clearInterval(this.addInterval)
				this.exitType = "onStop"
				this.FileManagerModule.shutdown()
				// #endif				
			},
			//  获取授权  开始扫描  获取文件 
			startScan() {
				console.log("开始扫描")
				console.log("获取文件类型：", this.scanOption, this.scanType)
				// #ifdef APP
				console.log("this_.FileManagerModule :", this.FileManagerModule)
				this.FileManagerModule.listFileByType(this.scanOption, this.scanType)
				// #endif
				// #ifdef H5
				console.log("需要app运行")
				// #endif

			},

			goPreviewItem() {
				console.log("点击item")
				console.log("扫描状态：", this.animationStatus)
				uni.setStorageSync("previewFrom", "files")
				if (this.animationStatus) { //正在扫描中
					this.goPreviewItemStatus = true
					let data = {
						type: "preview",
					}
					this.$refs.scanPopupView.popupOpen(data)
				} else { //已停止扫描				
					uni.setStorageSync("startInitType", "off")
					this.goPreviewItemStatus = false
					console.log(this.appVipSwitch, this.userInfo.vip_info.is_vip)
					if (this.appVipSwitch) {
						if (!this.userInfo.vip_info.is_vip) {
							this.$refs.openVipsView.popupOpen()
						} else {
							this.goPage("/pages/preview/index")
						}
					} else {
						this.goPage("/pages/preview/index")
					}


				}
			},
			// 停止扫描 跳转预览界面
			confirm_perview() {
				console.log("停止扫描")
				uni.setStorageSync("startInitType", "off")
				// #ifdef APP								
				this.progress = 100
				this.animationStatus = false
				clearInterval(this.addInterval)
				this.exitType = "onStop"
				this.FileManagerModule.shutdown()
				// #endif				
			},
			// 扫描,结束
			popupClose_scanEnd() {
				uni.setStorageSync("startInitType", "off")
				console.log("扫描结束 我知道了")
				if (this.goPreviewItemStatus) {
					console.log(this.appVipSwitch, this.userInfo.vip_info.is_vip)
					if (this.appVipSwitch) {
						if (!this.userInfo.vip_info.is_vip) {
							this.$refs.openVipsView.popupOpen()
						} else {

							setTimeout(() => {
								this.goPage("/pages/preview/index")
							}, 200)
						}
					} else {
						setTimeout(() => {
							this.goPage("/pages/preview/index")
						}, 200)
					}
				}
			},
			prve() {
				if (this.page > 1) {
					this.page--
					this.list = this.pagesList[this.page - 1]
				}

			},


			next() {
				if (this.page < this.total) {
					this.page++
					this.list = this.pagesList[this.page - 1]
				}
			},
			// 扫描完成后选择展示分类
			flClick(item, index) {
				this.fenleiActveIndex = index
			}

		}
	}
</script>
<style>
	.pages {
		background: linear-gradient(135deg, #E1EBFF 0%, #FAFCFF 100%);
	}
</style>


<style lang="scss" scoped>
	.top {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 500rpx;

		.pagesHeader {
			width: 100%;
			height: 500rpx;
			background: linear-gradient(135deg, #222635 0%, #464851 100%);
			border-radius: 0px 0px 30.77rpx 30.77rpx;
			margin-bottom: 38.46rpx;

			.header {
				position: relative;
				height: 84.62rpx;
				margin-bottom: 38.46rpx;

				.back {
					position: absolute;
					left: 0rpx;
					top: 0;
					width: 84.62rpx;
					height: 84.62rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.icon {
						width: 46.15rpx;
						height: 46.15rpx;
						display: flex;
					}
				}

				.content {
					position: absolute;
					left: 100rpx;
					right: 100 rpx;
					height: 84.62rpx;
					line-height: 84.62rpx;
					font-weight: 700;
					font-size: 32.69rpx;
					text-align: left;
					color: #FFFFFF;
				}
			}

			.headerMessage {
				display: flex;

				.left {
					padding: 0 28.85rpx;
					float: left;

					.leftView {
						.icon {
							width: 265.38rpx;
							height: 265.38rpx;
						}

						.animation {
							animation: spin 0.7s infinite linear;
						}

						@keyframes spin {
							from {
								transform: rotate(0deg);
							}

							to {
								transform: rotate(360deg);
							}
						}
					}
				}

				.right {
					flex: 1;

					.message_off {

						.message1 {
							height: 107.69rpx;
							font-size: 30.77rpx;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 107.69rpx;
							margin-bottom: 9.62rpx;
						}

						.message2 {
							height: 38.46rpx;
							font-size: 26.92rpx;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 30.77rpx;
						}
					}

					.message_init {
						margin-bottom: 51.92rpx;

						.message1 {
							height: 107.69rpx;
							font-size: 30.77rpx;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 107.69rpx;
							margin-bottom: 9.62rpx;

							.fontSize {
								font-size: 76.92rpx;
								font-weight: 600;
							}
						}

						.message2 {
							height: 38.46rpx;
							font-size: 26.92rpx;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 30.77rpx;
						}

					}

					.stopEnd {
						width: 192.31rpx;
						height: 61.54rpx;
						background: rgba(34,108,255,0.5);						
						border-radius: 30.77rpx;
						text-align: center;
						line-height: 61.54rpx;
						font-size: 26.92rpx;
						color: #FFFFFF;


					}

					.stop {
						width: 192.31rpx;
						height: 61.54rpx;
						background: #D93444;
						border-radius: 30.77rpx;
						text-align: center;
						line-height: 61.54rpx;
						font-size: 26.92rpx;
						color: #FFFFFF;
					}
				}
			}


		}

	}


	.pageContentView {
		position: fixed;
		top: 500rpx;
		left: 0;
		right: 0;
		bottom: 101.92rpx;

		.contentView {
			position: relative;
			width: 100%;
			height: 100%;


			// .headerMessage {
			// 	position: absolute;
			// 	top: 0;
			// 	left: 0;
			// 	right: 0;
			// 	display: flex;
			// 	height: 226rpx;
			// 	background: #ffffff;

			// 	.left {
			// 		float: left;
			// 		width: 240rpx;
			// 		height: 226rpx;
			// 		display: flex;
			// 		justify-content: center;
			// 		align-items: center;

			// 		.icon {
			// 			width: 120rpx;
			// 			height: 120upx;

			// 		}


			// 	}

			// 	.right {
			// 		flex: 1;
			// 		width: 330rpx;
			// 		padding-top: 60rpx;

			// 		.progress {
			// 			width: 480rpx;
			// 			height: 13rpx;
			// 			background-color: #7FB3FC;
			// 			border-radius: 8rpx;
			// 			margin-bottom: 30rpx;

			// 			.box {
			// 				width: 10%;
			// 				height: 13rpx;
			// 				background-color: #1073F9;
			// 				border-radius: 8rpx;
			// 			}
			// 		}

			// 		.numbers {
			// 			height: 32rpx;

			// 			.num {
			// 				float: left;
			// 				height: 56rpx;
			// 				line-height: 56rpx;
			// 				font-size: 24rpx;
			// 				font-weight: 400;
			// 				color: #454655;
			// 			}

			// 			.stop {
			// 				float: right;
			// 				margin-right: 32rpx;
			// 				width: 160rpx;
			// 				height: 56rpx;
			// 				background: url(../../static/images/stopIcon.png) center center no-repeat;
			// 				background-size: 100% 100%;
			// 			}

			// 			.stopEnd {
			// 				float: right;							
			// 				border-radius: 8rpx;
			// 				background: #222635;
			// 				width: 160rpx;
			// 				height: 56rpx;
							
			// 				color: #ccc;
			// 				font-size: 24rpx;
			// 				text-align: center;
			// 				line-height: 56rpx;


			// 			}
			// 		}


			// 	}
			// }


			.listView {
				position: absolute;
				z-index: 30;
				left: 0;
				right: 0;
				top: 19.23rpx;
				bottom: 0;
				overflow-y: auto;

				.no_data {
					padding-top: 160rpx;

					.icon {
						width: 232rpx;
						height: 174rpx;
						display: block;
						margin: 0 auto;
					}

					.hint {
						text-align: center;
						height: 44rpx;
						font-size: 28rpx;
						font-family: SourceHanSansCN;
						font-weight: normal;
						color: rgba(0, 0, 0, 0.5);
						line-height: 44rpx;
						margin-bottom: 50rpx;

					}
				}

			}



		}










	}

	.foo {
		position: fixed;

		left: 0;
		right: 0;
		bottom: 0;
		height: 101.92rpx;
		background: #FFFFFF;

		.pages {
			position: absolute;
			left: 0;
			right: 0;
			height: 100rpx;
			bottom: 0;
			display: flex;

			.prve {
				flex: 2;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.box {
					font-size: 24rpx;
					width: 160rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border-radius: 8rpx;
					background-color: #1073F9;
					color: #ffffff;
				}

				.boxDisable {
					background-color: #ffffff;
					border: 2rpx solid #454655;
					color: #454655;
				}

			}

			.content {
				flex: 3;
				line-height: 100rpx;
				text-align: center;
				font-size: 24rpx;
			}

			.next {
				flex: 2;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.box {
					font-size: 24rpx;
					width: 160rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border-radius: 8rpx;
					background-color: #1073F9;
					color: #ffffff;
				}

				.boxDisable {
					background-color: #ffffff;
					border: 2rpx solid #454655;
					color: #454655;
				}

			}
		}




		.left {
			float: left;
			padding: 34.62rpx 0 0 30.77rpx;

			.iconView {
				.icon {
					width: 30.77rpx;
					height: 30.77rpx;
					display: block;
					float: left;
				}
			}


			.text {
				float: left;
				height: 42.31rpx;
				font-size: 30.77rpx;
				font-weight: 400;
				color: #909090;
				line-height: 42.31rpx;


			}
		}

		.del {
			float: left;

			.icon {
				width: 30.77rpx;
				height: 30.77rpx;
				display: block;
			}

			.delete {}
		}

		.export {
			float: right;
			padding-right: 30.77rpx;

			.exportBtn {
				width: 276.92rpx;
				height: 69.23rpx;
				background: #3970FF;
				border-radius: 34.62rpx;
				text-align: center;
				line-height: 69.23rpx;
				font-size: 30.77rpx;
				color: #ffffff;
			}
		}


	}

	.popup_option_content {
		width: 686rpx;
		min-height: 300rpx;
		background: #fff;
		border-radius: 30rpx;
		padding-bottom: 40rpx;

		.popup_option_header {
			text-align: center;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 28rpx;
			font-weight: 600;
		}

		.popup_optionAccount {
			min-height: 150rpx;

			.popup_option_list {
				.itemSpan {

					.item {
						width: 240rpx;
						height: 80rpx;
						margin: 0 auto;
						border: 2rpx solid #ccc;
						line-height: 80rpx;
						text-align: center;
						border-radius: 10rpx;
						color: rgba(0, 0, 0, 0.6);
					}

					.optionsItemActive {
						border: 2rpx solid #FC3B3B;
						color: #FC3B3B;

					}
				}


			}


		}

		.btn {
			padding: 0 20rpx;
			height: 88rpx;

			.popup_btn {
				width: 310rpx;
				height: 88rpx;
				line-height: 88rpx;
				background-color: #FC3B3B;
				color: #fff;
				text-align: center;
				border-radius: 20rpx;
				margin: 0 auto;
			}

			.popup_btn_disable {
				background-color: #fff;
				color: #ccc;
				border: 2rpx solid #ccc;
			}
		}
	}
</style>